<ion-header>
  <ion-navbar>
    <ion-icon name="arrow-back" (click)="back()"></ion-icon>
    <ion-title>订单详情</ion-title>
  </ion-navbar>
</ion-header>

<ion-content (ionScroll)="loaderMore($event)">
  <div *ngIf="!showLoading || orderList.length > 0" class="order_page">
    <div class="order_empty" *ngIf="orderList.length == 0">
      <img class="order_empty" src="../../assets/imgs/order.png" class="order_empty_icon">
      <p class="order_empty_text">您最近没有订单</p>
    </div>
    <ul class="order_list_ul" *ngIf="orderList.length > 0">
      <li class="order_list_li" *ngFor="let item of orderList">
        <img [src]="imgBaseUrl + item.restaurant_image_url" class="restaurant_image">
        <section class="order_item_right">
          <section (click)="showDetail(item)">
            <header class="order_item_right_header">
              <section class="order_header">
                <h4>
                  <span class="ellipsis">{{item.restaurant_name}} </span>
                  <svg fill="#333" class="arrow_right">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                  </svg>
                </h4>
                <p class="order_time">{{item.formatted_created_at}}</p>
              </section>
              <p class="order_status">
                {{item.status_bar.title}}
              </p>
            </header>
            <section class="order_basket">
              <p class="order_name ellipsis">{{item.basket.group[0][0].name}}{{item.basket.group[0].length > 1 ? ' 等' + item.basket.group[0].length + '件商品'
                : ''}}</p>
              <p class="order_amount">¥{{item.total_amount.toFixed(2)}}</p>
            </section>
          </section>
          <div class="order_again">
            <div class="page" *ngIf="item.status_bar.title == '等待支付'">
              <span class="rem_time" class="wait_pay" (click)="toPay()">{{item.time_pass|timeLast}}</span>
              <!--<alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>-->
            </div>
            <span class="buy_again" *ngIf="">再来一单</span>
          </div>
        </section>
      </li>
    </ul>
  </div>
  <loading *ngIf="showLoading"></loading>
  <p *ngIf="touchEnd" class="empty_data">没有更多了</p>
</ion-content>